<!DOCTYPE HTML>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/c_layout.css" />
	<link rel="stylesheet" href="css/font.css" />
	<title>Biscuit</title>

	<script type="text/javascript" src="js/jquery-1.7.js"></script>
	<script type="text/javascript">

	var numStartOffset = 0;
	var roomList;
	
	$(function() {
		
		$.ajax("roomServlet", {cache: false}).done(function(data) {
			
			// 방 정보 리스트를 받아온다.
			roomList = data;
			
			if (roomList != null) {
				listRoom(0);
			}
		});
	});

	function findRoom() {

		// 출력 초기화
		for (var idx = 1; idx <= 6; idx++) {
	
			document.getElementById("room_" + idx + "_href").href = "";
			document.getElementById("room_" + idx + "_title").innerHTML = "";
			document.getElementById("room_" + idx + "_cnt").innerHTML = "";
			document.getElementById("room_" + idx + "_index").innerHTML = "";
		}
		
		var targetName = window.prompt("Enter the name of a room to find","");
		
		if (targetName) {
			$.ajax("roomServlet", {cache: false}).done(function(data) {
				
				// 방 정보 리스트를 받아온다.
				roomList = data;
				
				if (roomList != null) {
					
					var targetNum = 1;
					
					// 해당 방을 찾는다.
					for (var idx = 0; idx < roomList.length; idx++) {
						
						if (roomList[idx].title.search(targetName) > -1) {
							
							console.log(roomList[idx].title.search(targetName));
							
							var room_href	= document.getElementById("room_" + targetNum + "_href");
							var room_title	= document.getElementById("room_" + targetNum + "_title");
							var room_cnt	= document.getElementById("room_" + targetNum + "_cnt");
							var room_index	= document.getElementById("room_" + targetNum + "_index");
							
							room_href.href = "app.jsp?index=" + encodeURIComponent(idx);
							room_title.innerHTML = roomList[idx].title;
							room_cnt.innerHTML = roomList[idx].userList.length + " People";
							room_index.innerHTML = idx + 1;
							
							// 다음 엘리먼트에 주의사항 출력
							var nextTargetNum = targetNum + 1;
							document.getElementById("room_" + nextTargetNum + "_title").innerHTML =
								"Press F5 to go back";
							
							targetNum++;
							
							// 표시 초과하면 Escape
							if (targetNum == 6) break;
						}
					}
				}
			});
		}
	}
	
	function createRoom() {
		
		var title = window.prompt("Enter the title of a new room","");
		
		if (title) {
			window.location = "app.jsp?title=" + encodeURIComponent(title);
		}
	}
	
	function listRoom(offset) {
		
		// 방 정보를 리스팅 한다.
		// idx : 방 탐색 용 인덱스
		for (var idx = 1; idx <= 6; idx++) {

			var room_href	= document.getElementById("room_" + idx + "_href");
			var room_title	= document.getElementById("room_" + idx + "_title");
			var room_cnt	= document.getElementById("room_" + idx + "_cnt");
			var room_index	= document.getElementById("room_" + idx + "_index");
			
			// real_idx : 실제 데이터 접근 용 인덱스
			var real_idx = idx - 1 + offset;
			
			if (roomList[real_idx] != null) {
				
				room_href.href = "app.jsp?index=" + encodeURIComponent(real_idx);
				room_title.innerHTML = roomList[real_idx].title;
				room_cnt.innerHTML = roomList[real_idx].userList.length + " People";
				room_index.innerHTML = real_idx + 1;
			} else {
				
				room_href.href = "";
				room_title.innerHTML = "";
				room_cnt.innerHTML = "";
				room_index.innerHTML = "";
			}
		}
		
	}
	
	function flipLeft() {
		
		if (numStartOffset - 6 >= 0) {
			
			numStartOffset -= 6;
			listRoom(numStartOffset);
		}
	}
	
	function flipRight() {

		if (numStartOffset + 6 < roomList.length) {
			
			numStartOffset += 6;
			listRoom(numStartOffset);
		}
	}
	
	</script>
</head>
<body>
	<div class="wrap">
	<div class="header">
	<h1>BISCUIT</h1>
	<ul class="btn l_box">
		<li class="fir_btn"><a href="javascript:findRoom()" alt="검색" ><img src="img/btn_3.png" alt="search" /></a></li>
		<li><a href="javascript:createRoom()" alt="추가"><img src="img/btn_2.png" alt="plus" /></a></li>
		<li><a href="authServlet?action=logout" alt="로그아웃" ><img src="img/btn_1.png" alt="logout" /></a></li>
	</ul>
	
	</div>
		<div class="w_box l_box">
		<a href="javascript:flipRight()" title="next" class="next"><img src="img/n_btn.png" alt="next" /></a>
		<a href="javascript:flipLeft()" title="pre" class="pre"><img src="img/p_btn.png" alt="pre" /></a>
			<ul>
				<a href="#" alt="1번방" id="room_1_href">
				<li class="box l_box box_s box_t">
				<span class="t_box"><span>
					<div id="room_1_title"></div>
					<span id="room_1_cnt"></span></span></span>
					<span class="cn" id="room_1_index"></span>
				</li></a>
				<a href="#" alt="2번방" id="room_2_href">
				<li class="box l_box">
				<span class="t_box"><span>
					<div id="room_2_title"></div>
					<span id="room_2_cnt"></span></span></span>
					<span class="cn" id="room_2_index"></span>
				</li></a>
				<a href="#" alt="3번방" id="room_3_href">
				<li class="box l_box">
					<span class="t_box"><span>
					<div id="room_3_title"></div>
					<span id="room_3_cnt"></span></span></span>
					<span class="cn" id="room_3_index"></span>
				</li></a>
				<a href="#" alt="4번방" id="room_4_href">
				<li class="box l_box box_s box_b">
					<span class="t_box"><span>
					<div id="room_4_title"></div>
					<span id="room_4_cnt"></span></span></span>
					<span class="cn" id="room_4_index"></span>
				</li></a>
				<a href="#" alt="5번방" id="room_5_href">
				<li class="box l_box box_b">
					<span class="t_box"><span>
					<div id="room_5_title"></div>
					<span id="room_5_cnt"></span></span></span>
					<span class="cn" id="room_5_index"></span>
				</li></a>
				<a href="#" alt="6번방" id="room_6_href">
				<li class="box l_box box_b">
					<span class="t_box"><span>
					<div id="room_6_title"></div>
					<span id="room_6_cnt"></span></span></span>
					<span class="cn" id="room_6_index"></span>
				</li></a>
			</ul>
		</div>
	</div>
</body>
</html>
